<template>
    <main-wrap style="background-color: #fff;">
        <div class="home">
            <div class="homeTop">
                <div class="topBox">
                    <div class="avatar"><img src="/images/qy.png"/></div>
                    <div class="ms">
                        <h4>{{company.name}}</h4> 
                    </div>
                </div>
                <div class="userTab">
                    <RouterLink class="tabItem" :to="{ name: 'Index' }">
                        <span><b>{{analysData2.customTotal}}</b></span>
                        <p>客户总数</p>
                    </RouterLink>
                    <RouterLink class="tabItem" :to="{ name: 'Index' }">
                        <span>
                            <!-- <b>{{analysData.new_contact_cnt}}</b> -->
                            <b>{{todayAddTotal || 0}}</b>
                        </span>
                        <p>今日新增客户</p>
                    </RouterLink>
                    <RouterLink class="tabItem" :to="{ name: 'Loss',query:{starttime,endtime} }">
                        <span>
                            <!-- <b>{{analysData.negative_feedback_cnt}}</b> -->
                            <b>{{todayLossTotal || 0}}</b>
                        </span>
                        <p>今日流失客户</p>
                    </RouterLink>
                </div>
            </div>
            <div class="homeMain">
                <div class="hdBox">
                    <h5>客户互动</h5>
                    <ul class="hdlist">
                        <li>
                            <div class="iconbox">
                                <img src="/images/h1.png"/>
                            </div>
                            <h5>今日聊天</h5>
                            <p><b>{{analysData.chat_cnt}}</b>人聊天</p>
                        </li>
                        <li>
                            <RouterLink :to="{ name: 'Moment' }">
                                <div class="iconbox">
                                    <img src="/images/h3.png"/>
                                </div>
                                <h5>今日朋友圈</h5>
                                <p><b>{{momentList.length}}</b>人发朋友圈</p>
                            </RouterLink>
                        </li>
                        <li>
                            <RouterLink :to="{ name: 'Groupmsg' }">
                                <div class="iconbox">
                                    <img src="/images/h2.png"/>
                                </div>
                                <h5>今日群发消息</h5>
                                <p><b>{{groupmsg.length}}</b>条</p>
                            </RouterLink>
                        </li>
                    </ul>
                </div>
                <div class="hdBox">
                    <h5>成员客户</h5>
                    <ul class="hdlist">
                        <template v-for="(dt,index) in analysData2.lists">
                            <li :key="dt._id.userid" v-if="index<3">
                                <div class="iconbox">
                                    <Image :url="dt._id.avatar"/>
                                </div>
                                <h5>{{dt._id.name}}</h5>
                                <p><b>{{dt.lists.length}}</b>人</p>
                            </li>
                        </template>
                        <li v-if="analysData2.lists && analysData2.lists.length>3">
                            <RouterLink class="more" :to="{ name: 'McAnalys' }">
                                <img src="/images/more.png"/>
                            </RouterLink>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <template v-slot:footer>
            <footer-nav/>
        </template>
    </main-wrap>
</template>
<script setup>
import { ref,onMounted } from "vue";
import{useRouter} from "vue-router"
import moment from 'moment'
import mainWrap from '@/components/mainWrap.vue'
import footerNav from '@/components/footerNav.vue'
import Image from "@/components/image.vue"
import {getBehaviorData,
    getDepartmentList,
    customCount,
    get_moment_list,
    get_groupmsg_list,
    get_company_list,
    getCustomList
} from '@/api/qy-wechat-api'
import Cookies from "@/utils/auth.js"
import {toast} from '@/utils/vant'
import { useUserStore } from '@/stores/modules/user'

const router = useRouter()
const userStore = useUserStore()

const analysData = ref({})
const searchParams = ref({isUsable:true})
const pageSize = 100000
const pageIndex = 1
const analysData2 = ref({}) // 
const momentList = ref([])
const groupmsg = ref([])
const company = ref({})
const starttime = ref('')
const endtime = ref('')
const todayLossTotal = ref(0)
const todayAddTotal = ref(0)

onMounted(async ()=>{
    // console.log("11:",moment('2023-11-22 00:00:01').unix())
    // console.log("22:",moment('2023-11-22 23:59:59').unix())
    // console.log("33:",moment().format('YYYY-MM-DD'))
    const today = moment().format('YYYY-MM-DD')
    starttime.value = moment(`${today} 00:00:01`).unix()
    endtime.value = moment(`${today} 23:59:59`).unix()

    const res = await getDepartmentList()  // 获取部门
    if(res.code == 200){
        const dmData = res.data.department || []
        let departmentIds = [] // 部门id
        dmData.forEach(item => {
            departmentIds.push(item.id)
        });

        getBehaviorData({
            start_time:moment(today).unix(),//moment(`${today} 00:00:01`).unix(),
            end_time:moment(today).unix(),//moment(`${today} 23:59:59`).unix(),
            partyid:departmentIds
            //userid:['woy8p1VAAAJ2wqk4yyenP2zDIp9YKgVA']
        }).then(res =>{
            analysData.value = res.data.behavior_data[0]
        })
    }else{
        toast(res.message || '获取数据出错')
    }  

    customCount({pageSize,pageIndex,...searchParams.value}).then(res =>{
        analysData2.value = res.data
    })

    // 获取发朋友圈记录
    get_moment_list({
        start_time:moment(`${today} 00:00:01`).unix(),
        end_time:moment(`${today} 23:59:59`).unix(),
    }).then(res =>{
        momentList.value = res.data.moment_list
    })

    // 获取群发记录列表
    get_groupmsg_list({
        chat_type:'single',//群发任务的类型，默认为single，表示发送给客户，group表示发送给客户群
        start_time:moment(`${today} 00:00:01`).unix(),
        end_time:moment(`${today} 23:59:59`).unix(),
    }).then(res =>{
        groupmsg.value = res.data.group_msg_list
    })

    // 获取当前公司
    get_company_list({corpid:userStore.userInfo.corpId}).then(res =>{
        company.value = res.data.data[0]
    }) 

    // 获取今日流失客户（删除）
    getCustomList({
        isDelete:true,
        del_start_time:moment(`${today} 00:00:01`).unix()*1000,
        del_end_time:moment(`${today} 23:59:59`).unix()*1000
    }).then(res =>{
        todayLossTotal.value = res.data.data.length
    })

    // 获取今日新增客户
    getCustomList({
        isUsable:true,
        start_time:moment(`${today} 00:00:01`).unix(),
        end_time:moment(`${today} 23:59:59`).unix()
    }).then(res =>{
        todayAddTotal.value = res.data.data.length
    })
})



</script>

<style lang="scss" scoped>
.home{
    background: url('/images/cbg.png') left top no-repeat;
    background-size: 100% auto;
    background-color: #fff;
    .homeTop{
        font-size: 26px;
        padding: 30px 30px 0 30px;
        .topBox{
            height: 110px;
            display: flex;
            .avatar{
                width: 100px;
                height: 100px;
                border-radius:50% ;
                overflow: hidden;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .ms{
                flex: 1;
                display: flex;
                padding: 0 0 0 20px;
                h4{
                    flex: 1;
                    display: flex;
                    align-items: center;  
                    line-height: 110px;
                    padding: 0 0 0 10px;
                    color: #fff;
                    font-size: 30px;
                    font-weight: 500;
                    img{
                        width: 35px;
                        margin: 0 0 0 5px;
                    }
                }
                p{
                    display: flex;
                    height: 40px;
                    color: #999999;
                    align-items: center;
                    margin: 25px 0 0 0;
                    img{
                        width: 55px;
                    }
                }
            }
            .opBtnBox{
                display: flex;
                justify-content: center;
                align-items: center; 
                padding: 0 10px 0 0;
                .editBtn{
                    display: inline-block;
                    height: 52px;
                    line-height: 50px;
                    text-align: center;
                    border: 1px solid #ffffff;
                    border-radius:26px ;
                    color: #ffffff;
                    font-size: 26px;
                    margin: 0;
                    padding: 0 20px;
                    &+.editBtn{
                        margin-left: 20px;
                    }
                }
            }
            
        }
        .userTab{
            display: flex;
            margin: 22px 0 0 0;
            height: 200px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 5px 10px 10px #595857;
            .tabItem{
                position: relative;
                z-index: 10;
                flex: 1;
                text-align: center;
                padding: 40px 0 0 0;
                &+.tabItem{
                    &::before{
                        display: block;
                        content: '';
                        position: absolute;
                        z-index: 10;
                        left: 0;
                        top: 50px;
                        height: 90px;
                        width: 1px;
                        overflow: hidden;
                        background: #d4d4d4;
                    }
                }
                span{
                    display: block;
                    padding: 0;
                    font-size: 28px;
                    font-weight: normal;
                }
                b{
                    font-size: 42px;
                }
                p{
                    padding: 15px 0;
                    font-size: 28px;
                }
                .recharge{
                    display: block;
                    width: 144px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    background: #e3af2f;
                    border-radius:24px ;
                    color: #fff;
                    font-size: 24px; 
                    margin: 0 auto;
                }
                .withdrawal{
                    display: block;
                    width: 144px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    border: 1px solid #919192;
                    border-radius:24px ;
                    color: #cccccc;
                    font-size: 24px; 
                    margin: 20px auto 0 auto;
                }
            }
        } 
    }
    .homeMain{
        margin: -100px 0 0 0;
        background:url('/images/cbg2.png') left top no-repeat;
        background-size: 100% auto;
        width: 100%;
        padding: 100px 30px 30px 30px;
        font-size: 30px;
        .hdBox{
            margin: 30px 0 0 0;
            background: #f5f3f3;
            border-radius: 10px;
           // box-shadow: 5px 5px 10px #f5f5f5;
            padding: 20px;
            h5{
                padding: 0 0 20px 0;
                margin: 0;
                font-size: 28px;
                font-weight: bold;
            }
            .hdlist{
                display: flex;
                padding: 0;
                margin: 0;
                list-style: none;
                li{
                    flex: 1;
                    min-height: 200px;
                    background-color: #fff;
                    border: 1px solid #f5f0f0;
                    border-radius: 8px;
                    padding: 20px;
                    text-align: center;
                    flex-shrink: 0;
                    a{
                        display: block;
                    }
                    &+li{
                        margin-left: 15px;
                    }
                    .iconbox{
                        width: 70px;
                        height: 70px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin: 0 auto;
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                        }
                    }
                    h5{
                        font-size: 24px;
                        color: #999;
                        padding: 10px 0;
                        margin: 0;
                        font-weight: normal;
                    }
                    p{
                        font-size: 22px;
                        padding: 0;
                        margin: 0;
                        b{
                            color: red;
                            font-weight: bold;
                        }
                    }
                    .more{
                        display: flex;
                        width: 100%;
                        height: 100%;
                        justify-content: center;
                        align-items: center;
                        img{
                            display: block;
                            width: 60px;
                        }
                    }
                }
            }
        }
    }
} 
</style>